import React, { useState } from 'react';
import { Book, Code, Eye, Copy, ChevronRight, FileText, GitBranch, Box, Database, Calendar, Play, Info } from 'lucide-react';
import { chartDocumentation } from '../../data/chartDocs';
import { templates } from '../../data/chartTemplates';
import Tooltip from '../components/Tooltip';

const DocumentationCenter = () => {
  const [selectedChartType, setSelectedChartType] = useState('flowchart');
  const [copiedCode, setCopiedCode] = useState('');

  const chartTypes = [
    { 
      id: 'flowchart', 
      name: '流程图', 
      icon: GitBranch, 
      description: '用于展示流程、算法和工作流程的图表',
      color: '#4CAF50'
    },
    { 
      id: 'sequence', 
      name: '时序图', 
      icon: Play, 
      description: '展示对象之间交互的时间顺序',
      color: '#2196F3'
    },
    { 
      id: 'class', 
      name: '类图', 
      icon: Box, 
      description: '展示类之间的关系和结构',
      color: '#9C27B0'
    },
    { 
      id: 'state', 
      name: '状态图', 
      icon: Info, 
      description: '展示对象状态的变化',
      color: '#FF9800'
    },
    { 
      id: 'er', 
      name: 'ER图', 
      icon: Database, 
      description: '实体关系图，用于数据库设计',
      color: '#F44336'
    },
    { 
      id: 'gantt', 
      name: '甘特图', 
      icon: Calendar, 
      description: '项目管理和时间规划图表',
      color: '#795548'
    },
    { 
      id: 'pie', 
      name: '饼图', 
      icon: Database, 
      description: '展示数据的占比关系',
      color: '#607D8B'
    },
    { 
      id: 'journey', 
      name: '旅程图', 
      icon: FileText, 
      description: '用户体验和流程的可视化',
      color: '#E91E63'
    }
  ];

  const copyToClipboard = async (text) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopiedCode(text);
      setTimeout(() => setCopiedCode(''), 2000);
    } catch (err) {
      console.error('复制失败:', err);
    }
  };

  const currentDoc = chartDocumentation[selectedChartType];
  const currentTemplate = templates[selectedChartType] || templates.flowchart;

  return (
    <div className="documentation-center">
      {/* 页面头部 */}
      <div className="docs-header">
        <div className="docs-header-content">
          <div className="docs-title-section">
            <Book className="docs-icon" size={32} />
            <div>
              <h1 className="docs-title">文档中心</h1>
              <p className="docs-subtitle">完整的 Mermaid 图表语法指南和使用文档</p>
            </div>
          </div>
        </div>
      </div>

      <div className="docs-container">
        {/* 侧边栏导航 */}
        <div className="docs-sidebar">
          <div className="sidebar-header">
            <h3>图表类型</h3>
          </div>
          <div className="chart-types-list">
            {chartTypes.map((chart) => {
              const IconComponent = chart.icon;
              return (
                <div
                  key={chart.id}
                  className={`chart-type-item ${selectedChartType === chart.id ? 'active' : ''}`}
                  onClick={() => setSelectedChartType(chart.id)}
                >
                  <div className="chart-type-icon" style={{ color: chart.color }}>
                    <IconComponent size={20} />
                  </div>
                  <div className="chart-type-info">
                    <div className="chart-type-name">{chart.name}</div>
                    <div className="chart-type-desc">{chart.description}</div>
                  </div>
                  <ChevronRight size={16} className="chart-type-arrow" />
                </div>
              );
            })}
          </div>
        </div>

        {/* 主内容区域 */}
        <div className="docs-main">
          {currentDoc && (
            <div className="doc-content">
              {/* 图表标题和描述 */}
              <div className="doc-header">
                <div className="doc-title-section">
                  <h2 className="doc-title">{currentDoc.name}</h2>
                  <p className="doc-description">{currentDoc.description}</p>
                </div>
              </div>

              {/* 基本语法 */}
              <div className="doc-section">
                <div className="section-header">
                  <h3 className="section-title">基本语法</h3>
                  <Tooltip content="复制语法代码" position="top">
                    <button 
                      className="copy-btn"
                      onClick={() => copyToClipboard(currentDoc.syntax)}
                    >
                      <Copy size={16} />
                      {copiedCode === currentDoc.syntax ? '已复制!' : '复制'}
                    </button>
                  </Tooltip>
                </div>
                <div className="syntax-block">
                  <pre className="syntax-code">{currentDoc.syntax}</pre>
                </div>
              </div>

              {/* 参数说明 */}
              <div className="doc-section">
                <h3 className="section-title">参数说明</h3>
                <div className="parameters-grid">
                  {currentDoc.parameters.map((param, index) => (
                    <div key={index} className="parameter-card">
                      <div className="parameter-name">{param.name}</div>
                      <div className="parameter-description">{param.description}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* 完整示例 */}
              <div className="doc-section">
                <div className="section-header">
                  <h3 className="section-title">完整示例</h3>
                  <Tooltip content="复制示例代码" position="top">
                    <button 
                      className="copy-btn"
                      onClick={() => copyToClipboard(currentDoc.example)}
                    >
                      <Copy size={16} />
                      {copiedCode === currentDoc.example ? '已复制!' : '复制'}
                    </button>
                  </Tooltip>
                </div>
                <div className="example-block">
                  <pre className="example-code">{currentDoc.example}</pre>
                </div>
              </div>

              {/* 使用技巧 */}
              <div className="doc-section">
                <h3 className="section-title">使用技巧</h3>
                <div className="tips-list">
                  {currentDoc.tips.map((tip, index) => (
                    <div key={index} className="tip-item">
                      <div className="tip-bullet"></div>
                      <div className="tip-text">{tip}</div>
                    </div>
                  ))}
                </div>
              </div>

              {/* 快速开始模板 */}
              <div className="doc-section">
                <div className="section-header">
                  <h3 className="section-title">快速开始模板</h3>
                  <Tooltip content="复制模板代码" position="top">
                    <button 
                      className="copy-btn"
                      onClick={() => copyToClipboard(currentTemplate)}
                    >
                      <Copy size={16} />
                      {copiedCode === currentTemplate ? '已复制!' : '复制'}
                    </button>
                  </Tooltip>
                </div>
                <div className="template-block">
                  <pre className="template-code">{currentTemplate}</pre>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default DocumentationCenter;